<template>
  <div class="table-wrapper">
    <a-table
      row-key="id"
      :loading="loading"
      :data="data"
      :pagination="pagination"
      :bordered="true"
      :stripe="true"
      @page-change="onPageChange"
    >
      <template #columns>
        <a-table-column title="序号" align="center" :width="70">
          <template #cell="{ rowIndex }">
            {{ (pagination.current - 1) * pagination.pageSize + rowIndex + 1 }}
          </template>
        </a-table-column>
        <a-table-column title="第三方订单号" data-index="thirdPartyOrderNo" :width="160">
          <template #cell="{ record }">
            <a-link @click="handleViewDetail(record)">
              {{ record.thirdPartyOrderNo || '-' }}
            </a-link>
          </template>
        </a-table-column>
        <a-table-column title="平台名称" data-index="platformName" :width="120" />
        <a-table-column title="站点名称" data-index="stationName" :width="120" />
        <a-table-column title="充电电量(kWh)" data-index="chargingElec" :width="120" align="right">
          <template #cell="{ record }">
            {{ record.chargingElec?.toFixed(3) || '-' }}
          </template>
        </a-table-column>
        <a-table-column title="订单金额(元)" data-index="actualAmount" :width="120" align="right">
          <template #cell="{ record }">
            {{ record.actualAmount?.toFixed(2) || '-' }}
          </template>
        </a-table-column>
        <a-table-column title="同步状态" data-index="syncStatus" :width="100">
          <template #cell="{ record }">
            <a-tag :color="getSyncStatusColor(record.syncStatus)">
              {{ getSyncStatusText(record.syncStatus) }}
            </a-tag>
          </template>
        </a-table-column>
        <a-table-column title="创建时间" data-index="createTime" :width="180">
          <template #cell="{ record }">
            {{ formatDateTime(record.createTime) }}
          </template>
        </a-table-column>
        <a-table-column title="操作" align="center" :width="100" fixed="right">
          <template #cell="{ record }">
            <a-space>
              <a-button type="text" size="small" @click="handleViewDetail(record)">
                查看
              </a-button>
            </a-space>
          </template>
        </a-table-column>
      </template>
    </a-table>

    <!-- 订单详情弹窗 -->
    <a-modal
      v-model:visible="detailVisible"
      title="订单详情"
      :mask-closable="false"
      @cancel="closeDetail"
      :footer="false"
      :width="800"
    >
      <a-spin :loading="detailLoading">
        <div class="order-detail">
          <!-- 订单基本信息 -->
          <div class="detail-section">
            <div class="section-title">基本信息</div>
            <a-row :gutter="16">
              <a-col :span="12" v-for="item in basicInfo" :key="item.label">
                <div class="detail-item">
                  <span class="detail-label">{{ item.label }}：</span>
                  <span class="detail-value">{{ item.value }}</span>
                </div>
              </a-col>
            </a-row>
          </div>

          <!-- 金额信息 -->
          <div class="detail-section">
            <div class="section-title">金额信息</div>
            <a-row :gutter="16">
              <a-col :span="12" v-for="item in amountInfo" :key="item.label">
                <div class="detail-item">
                  <span class="detail-label">{{ item.label }}：</span>
                  <span class="detail-value" :class="{'amount-value': true}">
                    {{ item.value }}
                  </span>
                </div>
              </a-col>
            </a-row>
          </div>

          <!-- 同步信息 -->
          <div class="detail-section">
            <div class="section-title">同步信息</div>
            <a-row :gutter="16">
              <a-col :span="12" v-for="item in syncInfo" :key="item.label">
                <div class="detail-item">
                  <span class="detail-label">{{ item.label }}：</span>
                  <span class="detail-value">
                    <template v-if="item.label === '同步状态'">
                      <a-tag :color="getSyncStatusColor(detailData?.syncStatus)">
                        {{ item.value }}
                      </a-tag>
                    </template>
                    <template v-else>
                      {{ item.value }}
                    </template>
                  </span>
                </div>
              </a-col>
            </a-row>
          </div>
        </div>

        <!-- 操作按钮 -->
        <div class="detail-footer">
          <a-space>
            <a-button @click="closeDetail">关闭</a-button>
            <a-button type="primary" @click="handleExportDetail">
              导出该订单
            </a-button>
          </a-space>
        </div>
      </a-spin>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';
import type { ChargingOrder } from '@/api/order/reconciliation/types';
import { Message } from '@arco-design/web-vue';
import dayjs from 'dayjs';

const props = defineProps({
  data: {
    type: Array as () => ChargingOrder[],
    required: true
  },
  loading: {
    type: Boolean,
    default: false
  },
  pagination: {
    type: Object,
    required: true
  }
});

const emit = defineEmits(['page-change']);

// 详情相关
const detailVisible = ref(false);
const detailLoading = ref(false);
const detailData = ref<ChargingOrder | null>(null);

// 格式化日期时间
const formatDateTime = (date: string | null | undefined) => {
  if (!date) return '-';
  return dayjs(date).format('YYYY-MM-DD HH:mm:ss');
};

// 获取同步状态文本
const getSyncStatusText = (status: number | undefined) => {
  switch (status) {
    case 0:
      return '未同步';
    case 1:
      return '已同步';
    case 2:
      return '异常';
    default:
      return '未知';
  }
};

// 获取同步状态颜色
const getSyncStatusColor = (status: number | undefined) => {
  switch (status) {
    case 0:
      return 'orange';
    case 1:
      return 'green';
    case 2:
      return 'red';
    default:
      return 'gray';
  }
};

// 基本信息
const basicInfo = computed(() => {
  if (!detailData.value) return [];
  return [
    { label: '第三方订单号', value: detailData.value.thirdPartyOrderNo || '-' },
    { label: '平台名称', value: detailData.value.platformName || '-' },
    { label: '站点名称', value: detailData.value.stationName || '-' },
    { label: '充电桩编号', value: detailData.value.pileCode || '-' },
    { label: '三方设备编号', value: detailData.value.thirdPileNo || '-' }
  ];
});

// 金额信息
const amountInfo = computed(() => {
  if (!detailData.value) return [];
  return [
    { label: '充电电量', value: detailData.value.chargingElec ? `${detailData.value.chargingElec.toFixed(3)} kWh` : '-' },
    { label: '订单金额', value: detailData.value.actualAmount ? `¥${detailData.value.actualAmount.toFixed(2)}` : '-' },
    { label: '电费', value: detailData.value.electricityFee ? `¥${detailData.value.electricityFee.toFixed(2)}` : '-' },
    { label: '服务费', value: detailData.value.serviceFee ? `¥${detailData.value.serviceFee.toFixed(2)}` : '-' }
  ];
});

// 同步信息
const syncInfo = computed(() => {
  if (!detailData.value) return [];
  return [
    { label: '同步状态', value: getSyncStatusText(detailData.value.syncStatus) },
    { label: '创建时间', value: formatDateTime(detailData.value.createTime) },
    { label: '更新时间', value: formatDateTime(detailData.value.updateTime) }
  ];
});

// 查看详情
const handleViewDetail = async (record: ChargingOrder) => {
  try {
    detailLoading.value = true;
    detailData.value = record;
    detailVisible.value = true;
  } catch (error) {
    console.error('获取订单详情失败:', error);
    Message.error('获取订单详情失败');
  } finally {
    detailLoading.value = false;
  }
};

// 关闭详情
const closeDetail = () => {
  detailVisible.value = false;
  setTimeout(() => {
    detailData.value = null;
  }, 300);
};

// 导出当前订单
const handleExportDetail = () => {
  Message.success('导出成功');
};

// 分页变化
const onPageChange = (current: number) => {
  emit('page-change', current);
};
</script>

<style scoped lang="less">
.table-wrapper {
  width: 100%;
}

.order-detail {
  padding: 0 16px;

  .detail-section {
    margin-bottom: 24px;
    
    .section-title {
      font-size: 16px;
      font-weight: 500;
      color: var(--color-text-1);
      margin-bottom: 16px;
      padding-left: 8px;
      border-left: 4px solid rgb(var(--primary-6));
    }

    .detail-item {
      margin-bottom: 16px;
      display: flex;
      align-items: baseline;

      .detail-label {
        width: 120px;
        color: var(--color-text-3);
        flex-shrink: 0;
      }

      .detail-value {
        flex: 1;
        color: var(--color-text-1);
        word-break: break-all;

        &.amount-value {
          color: rgb(var(--primary-6));
          font-weight: 500;
        }
      }
    }
  }
}

.detail-footer {
  margin-top: 24px;
  padding: 16px 0;
  display: flex;
  justify-content: center;
  border-top: 1px solid var(--color-border);
}
</style> 